<style lang="scss" scoped>
.rate_set_wrap {
  margin-bottom: 20px;
  width: 100%;
  .rate_set_item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &.empty {
      line-height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #e5e5e5;
      width: 100%;
    }
    &.rate_set_header {
      font-weight: 550;
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
    }
    .rate {
      width: 200px;
    }
    .nickname {
      width: 200px;
    }
    .selectRole {
      width: 200px;
    }
    .time {
      flex: 1;
      display: flex;
      align-items: center;
      .select-box {
        display: flex;
        align-items: center;
      }
    }
  }
  .rate_set_main {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
  }
}
</style>

<template>
  <div class="rate_set_wrap">
    <div class="rate_set_header rate_set_item">
      <div class="rate">账号</div>
      <div class="nickname">密码</div>
      <div class="selectRole">选择主体角色ID</div>
      <div class="time">操作</div>
    </div>
    <div class="rate_set_main">
      <div class="rate_set_item empty" v-if="!formData.rateList.length">
        暂无数据
      </div>
      <el-form
        label-width="0px"
        :rules="rules"
        ref="formRef"
        :inline="true"
        :model="formData"
      >
        <div
          class="rate_set_item"
          v-for="(item, index) in formData.rateList"
          :key="index"
        >
          <div class="rate">
            <el-form-item
              :prop="'rateList.' + index + '.accountName'"
              :rules="{
                required: true,
                message: '请输入账号',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.accountName"
                placeholder="请输入账号"
                clearable
              />
            </el-form-item>
          </div>
          <div class="nickname">
            <el-form-item
              :prop="'rateList.' + index + '.accountPwd'"
              :rules="{
                required: true,
                message: '请输入密码',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.accountPwd"
                placeholder="请输入密码"
                clearable
              />
            </el-form-item>
          </div>
          <div class="selectRole">
            <el-form-item
              :prop="'rateList.' + index + '.subjectRid'"
              :rules="{
                required: false,
                message: '请选择主体角色ID',
                trigger: 'change',
              }"
            >
              <el-select 
                v-model="item.subjectRid"
                placeholder="请选择主体角色ID"
                clearable>
                <el-option 
                  v-for="item in subjectList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.rname"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="time">
            <el-form-item>
              <div class="select-box">
                <el-button :disabled="!item.id" @click="showSubModal(item)" type="danger"
                  >添加子账户</el-button
                >
                <el-popconfirm
                  title="确认删除该账户?"
                  @confirm="deleteItem(index)"
                >
                  <template #reference>
                    <el-button style="margin-left: 20px" type="warning"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
                <el-button :disabled="!item.id" @click="showImportModal(item)" type="success"
                  >导入子账户</el-button
                >
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <el-button @click="addReateItem" :icon="Plus" type="primary"
      >新增</el-button
    >
    <sub-account title="添加媒体子账户" width="900px" :account="account" v-model:show="show" />
    <import-account title="导入媒体子账户" :id="importModal.id" :account="account" v-model:show="showImport"/>
  </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { reactive, ref, watch, onMounted } from "vue";
import useForm from "@/hooks/useForm";
import usePageModal from "./usePageModal.js";
import subAccount from "./subAccount.vue";
import { MediaDeleteAccount } from "@/apis/media";
import ImportAccount from './importAccount.vue'
import { ElMessage } from "element-plus";
import { GetRoleSubjectList } from "@/apis/role";
const subjectList = ref([])
onMounted(() => {
  GetRoleSubjectList().then((res) => {
      console.log('res: ', res);
      subjectList.value = res
    })
})
const [modalData, showModal] = usePageModal({ width: "800px" });
const show = ref(false);
const account = reactive({
    id: '',
    account: ''
})
const props = defineProps({
  mediaAccount: {
    type: Array,
    default: () => [],
  },
});
watch(
  () => props.mediaAccount,
  (val) => {
    formData.rateList = val;
  }
);
defineExpose({
    validate: () => new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            // 表单校验成功
            valid ? resolve() : reject()
        })
    })
})
const { formRef, search, validate } = useForm();
const rules = {};
const formData = reactive({
  rateList: props.mediaAccount || [],
});
const showSubModal = item => {
    if (!item.id) return 
    Object.assign(account, {
        id: item.id,
        account: item.accountName
    })
    show.value = true

}
// 删除比例
const deleteItem = (index) => {
  const { id } = formData.rateList[index];
  if (!id) {
    formData.rateList.splice(index, 1);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  } else {
    MediaDeleteAccount(id).then((res) => {
      formData.rateList.splice(index, 1);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  }
  // formData.rateList.splice(index, 1);
};
// 新增比例
const addReateItem = () => {
  formData.rateList.push({
    accountName: '',
    accountPwd: '',
  });
};

const importModal = reactive({
  id: '',
  show: false
})
const showImport = ref(false)
const showImportModal = item => {
  console.log('item: ', item.id);
  Object.assign(account, {
      id: item.id,
      account: item.accountName
  })
  importModal.id = item.id
  showImport.value = true
}
</script>
